<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script type="text/javascript" src="./lib/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./lib/jquery-ui.min.js"></script>
    <script type="text/javascript" src="./lib/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="./lib/scroll.js"></script>
    <title>聊天机器人 -- 练习</title>
  </head>

  <body>
    <div class="wrap">
      <!-- 头部 Header 区域 -->
      <div class="header">
        <h3>小思同学</h3>
        <img src="img/person01.png" alt="icon" />
      </div>
      <!-- 中间 聊天内容区域 -->
      <div class="main">
        <ul class="talk_list" style="top: 0px">
          <li class="left_word">
            <img src="img/person01.png" />
            <span>你好</span>
          </li>
          <li class="right_word">
            <img src="img/person02.png" />
            <span>你好哦</span>
          </li>
        </ul>
        <!-- 右侧滚动条 -->
        <div class="drag_bar" style="display: none">
          <div
            class="drager ui-draggable ui-draggable-handle"
            style="display: none; height: 412.628px"
          ></div>
        </div>
      </div>
      <!-- 底部 消息编辑区域 -->
      <div class="footer">
        <img src="img/person02.png" alt="icon" />
        <!-- 输入框 -->
        <input type="text" placeholder="说的什么吧..." class="input_txt" />
        <!-- 发送按钮 -->
        <input type="button" value="发 送" class="input_sub" />
      </div>
    </div>

    <!-- 导入axios -->
    <script src="./lib/axios.js"></script>
    <script>
      //点击发送按钮/keyup的时候 接收输入框内容 打印出来
      //点击发送按钮
      document
        .querySelector(".input_sub")
        .addEventListener("click", function () {
          chat();
        });
      //keyup
      document.querySelector(".input_txt").onkeyup = function (e) {
        if (e.keyCode === 13) {
          chat();
        }
      };
      //上面绑定事件回调函数内的代码都相同，所以可以封装函数调用

      //将输入框里的内容 渲染到页面中对话框右边
      function chat() {
        //判断输入内容为空和非空的情况
        
        const value = document.querySelector(".input_txt").value.trim();
        if(value){
          const myLi = document.createElement("li");
        myLi.innerHTML = `<img src="img/person02.png" />
          <span>${value}</span>`;
        myLi.className = "right_word";
        document.querySelector(".talk_list").appendChild(myLi);
        document.querySelector(".input_txt").value = "";

        //接收接口数据，并渲染页面对话框左边机器人
        axios
          .get("http://www.liulongbin.top:3006/api/robot", {
            params: {
              spoken: value,
            },
          })
          .then((res) => {
            // console.log(res);
            const answer = res.data.data.info.text;
            // console.log(answer);
            const myLi1 = document.createElement("li");
            myLi1.innerHTML = `<img src="img/person01.png" />
            <span>${answer}</span>`;
            myLi1.className = "left_word";
            document.querySelector(".talk_list").appendChild(myLi1);
            // 输入框右侧滚动到页面底部
            window.resetui();
          });
        //输入框左侧滚动到页面底部
        window.resetui();
        } else{
          alert('请输入内容')
        }
        
      }
    </script>
  </body>
</html>
